<%@ page language="java" contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
    <jsp:include page="../common/common.jsp"/>
</head>
 

       <link href='${path}/assets/plugins/jquery-gridly/css/jquery.gridly.css' rel='stylesheet' type='text/css'>
      <link href='${path}/assets/plugins/jquery-gridly/css/sample.css' rel='stylesheet' type='text/css'>
      <script src='${path}/assets/plugins/jquery-gridly/js/jquery.gridly.js' type='text/javascript'></script>
      <script src='${path}/assets/plugins/jquery-gridly/js/sample.js' type='text/javascript'></script>
      <script src='${path}/assets/plugins/jquery-gridly/js/rainbow.js' type='text/javascript'></script>
<body class="page-header-fixed">
<jsp:include page="../common/header.jsp"/>
<div class="clearfix">
</div>
<div class="page-container">
    <div class="page-sidebar-wrapper"><jsp:include page="../common/menu.jsp"/></div>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">                                    
                    <form class="form-horizontal form-row-seperated" id="form" method="post" action="${path}/pptImg/save">
                        <div class="portlet box purple">
                        
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-shopping-cart"></i>详细内容
                                </div>
                                <div class="actions btn-set">
                                    <a href="javascript:history.go(-1);" class="btn default"><i
                                            class="fa fa-angle-left"></i> 返回</a>
                            
                                    <button type="button" onclick="save()" class="btn blue"><i class="fa fa-check"></i> 保存
                                    </button>
                               
                                </div>
                            </div>
                            
                            <div class="portlet-body">                        
                                <div class="tabbable">
                                	<ul class="nav nav-tabs" id="table">
										<li class="active">
											<a href="#tab_images" data-toggle="tab">
												ppt 图片信息
											</a>
										</li>
									</ul>
                                
                                    <div class="tab-content no-space">
                                        
                                        <div  class="tab-pane active"  id="tab_images"><!-- 图片div- -->
                                         
	                                           <div id="tab_images_uploader_container" class="text-align-reverse margin-bottom-10">
												<a id="tab_images_uploader_pickfiles" href="javascript:;" onClick="upImage()" class="btn yellow">
													<i class="fa fa-plus"></i> 上传图片
												</a>
											    <span style="color: red;">建议尺寸600*300</span>
												</div>
    											 
    												<div id="imgshow"></div>
	    										 <div class='content'>
												      <section class='example'>
												        <div class='gridly'   id="gridly">
												        
												        
												          <c:forEach  items="${listDate}"  var="p"  varStatus="status">
												               
												            <div class='brick small'  name="smal">
												            
												          <img src="${p.pptimg}"  width="100%"  height="100%">
												          <input hidden="hidden"  id="pptimg"  name="pptimg"  value="${p.pptimg}" >
												            <a class='delete' href='#'>&times;</a>
												            <span class="xh">${ status.index + 1}</span>
												          </div>
												          </c:forEach>
												         
												        </div>
												  
												      </section>
										        </div>
	
										</div>
                                    </div>
                                </div>
                            </div>
			 <script id="ueditorupload" type="text/plain"
	                                                            style="height:5px;display:none;" ></script>
                            <div class="portlet-title">
                                <div class="actions btn-set">
                                    <a href="javascript:history.go(-1);" class="btn default"><i
                                            class="fa fa-angle-left"></i> 返回</a>
         
                                    <button type="button" onclick="save()" class="btn blue"><i class="fa fa-check"></i> 保存
                                    </button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="pptListid" name="pptListid" value="${pptListid}">
 
                      				 <script id="ueditorupload" type="text/plain"
	                                                            style="height:5px;display:none;" ></script>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../common/footer.jsp"/>
<script src="${path}/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${path}/assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>

<script type="text/javascript" src="${path}/assets/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript" src="${path}/assets/plugins/jquery.input-ip-address-control-1.0.min.js"></script>
<script type="text/javascript" src="${path}/assets/plugins/jquery.pwstrength.bootstrap/src/pwstrength.js"></script>
<script type="text/javascript" src="${path}/assets/scripts/custom/components-form-tools.js"></script>
<script type="text/javascript" src="${path}/assets/scripts/biz/ajaxfileupload.js"></script>
<script type="text/javascript" src="${path}/assets/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${path}/assets/plugins/district/linkagesel-min.js"></script>
<script  type="text/javascript" src="${path}/assets/plugins/ueditor/ueditor.config.js"></script>
<script  type="text/javascript" src="${path}/assets/plugins/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="${path}/assets/scripts/biz/jsAddress.js"></script>




  
<script>

    var  form,o_ueditorupload;

 
    function save() {
	   var tr=$("#pptimg").val();
	   if(tr!=undefined){
		//排序 根据top和left去排序
		var arrt="";
		var arrl="";
		$("div[name='smal']").each(function(){ 
		
			var lt=Math.ceil($(this).position().left);
			var tp=Math.ceil($(this).position().top);
			
			
               if(arrt==""){
            	   arrt=lt+"";
               }else{
            	   arrt+=","+lt;
               }
               
               if(arrl==""){
            	   arrl=tp+"";
               }else{
            	   arrl+=","+tp;
               }
			});
		

		   App.ajax(_path + "/pptImg/save?sortTops="+arrl+"&sortLefts="+arrt, $("form").serialize(), function (data) {
	            if (data.statusCode == 200) {
	            	  App.bubble(200, "更新成功！");
	         		
	         
	            } else {
	            	  App.bubble(200, "更新失败！");
	            }
	        });
	   }else{
		 	  App.bubble(200, "没有需要保存的！");
	   }
     
    }
    
    
    
	var myEditorImage;  
	var d;  
	function upImage() {      
	    d = myEditorImage.getDialog("insertimage");  
	    d.render();  
	    d.open();  
	}  
	  
	myEditorImage=  UE.getEditor('ueditorupload');

	myEditorImage.ready(function(){  
	    myEditorImage.setDisabled();  
	    myEditorImage.hide();//隐藏UE框体 

	    myEditorImage.addListener('beforeInsertImage',function(t, arg){ 
	    
	 		for(var i in arg){
	 			$('#gridly').append("<div class='brick small'  name='smal'><img src='"+arg[i].src+"'  width='100%'  height='50%'><input hidden='hidden'   id='pptimg'   name='pptimg'  value='"+arg[i].src+"' ><a class='delete' href='#'>&times;</a></div>");
	 		}
	 		$('.gridly').gridly();
	    });  
	});  

    

</script>

</body>
</html>